<template>
    <div class="todoFilter">
        <span 
            v-for="filter in filters"
            :key="filter.kind"
            class="peek"
            :class="{checked: filter.kind == kind}"
            @click="$emit('change-filter',filter.kind)"
        >{{filter.label}}</span>
    </div>
</template>

<script>
export default {
    name: 'TodoFilter',
    props: {
        kind: {
            type: String,
        }
    },
    setup() {
        const filters = [
            {label:"全部",kind:'all'},
            {label:'已完成',kind:'done'},
            {label:'未完成',kind:'todo'}
        ]
        return {
            filters,
        }
    },
}
</script>

<style>
  .todoFilter {
    margin: 16px 2px;
    color: #c0c2ce;
    font-size: 14px;
    display: flex;
  }
  .todoFilter .peek {
    margin-right: 1rem;
    transition: 0.8s;
    cursor: pointer;
  }
  .todoFilter .checked {
    color: #6b729c;
    transform: scale(1.2);
  }
</style>